import React, { memo, useRef, useState } from 'react';
import { Steps, Popover, Divider, Alert, Empty } from 'antd';
import styles from './index.less';

const { Step } = Steps;

const statusWrapper = item => {
    switch (item.status) {
        case 'finish':
            return (
                <span className={styles.stepsIconText}>
                    <i className="icon iconfont iconduigou" style={{ color: '#FFA22D' }}></i>
                </span>
            );
        case 'error':
            return (
                <span className={styles.stepsIconText} style={{ borderColor: '#e8694a' }}>
                    <i className="icon iconfont icongantanhao" style={{ color: '#f5222d', fontSize: 30 }}></i>
                </span>
            );
        default:
            return <span className={styles.stepsIconText}>{item.index + 1}</span>;
    }
};

export default memo(({ stepsList = [], hide, loading }) => {
    const salaryProcessRef = useRef(null);
    const [visible, setVisible] = useState(false);

    const customDot = (dot, item) => (
        <React.Fragment>
            {item.status === 'wait' ? (
                <span className={styles.stepsIconText}>{item.index + 1}</span>
            ) : (
                <Popover
                    content={
                        <div className={styles.CheckStepsTip}>
                            {stepsList[item.index].tips && visible ? stepsList[item.index].tips : null}
                        </div>
                    }
                    placement={item.index + 1 === stepsList.length ? 'topRight' : 'top'}
                    getPopupContainer={() => salaryProcessRef.current}
                    onVisibleChange={v => setVisible(v)}
                >
                    {statusWrapper(item)}
                </Popover>
            )}
        </React.Fragment>
    );

    return (
        <div ref={salaryProcessRef} className={styles.stepWrapper}>
            {stepsList?.[0]?.status === 'error' ? (
                <Alert
                    message={stepsList[0].originalInfo.salaryGenerateFailureInfo}
                    type="warning"
                    showIcon
                    closable
                    style={{ marginTop: 10 }}
                />
            ) : null}
            <div className={styles.main} style={{ display: hide ? 'none' : 'block' }}>
                {stepsList?.length > 0 ? (
                    <>
                        <Steps className={styles.CheckSteps} current={null} progressDot={customDot}>
                            {stepsList?.map(item => (
                                <Step
                                    key={item.type}
                                    title={item.title}
                                    status={item.status}
                                    style={{ borderColor: '#e8694a' }}
                                />
                            ))}
                        </Steps>
                        <Divider />
                    </>
                ) : null}
                { loading || loading === null
                    ?
                        <>
                            <div style={{ margin: 'auto', marginTop: '28px' }}>
                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="加载中……"/>
                            </div>
                            <Divider />
                        </>
                    : null
                }
            </div>
        </div>
    );
});
